<template>
    <div>
        <div style="height: 50px; display: flex; align-items: center">
            <el-cascader style="margin-left: 20px" v-if="treeData.length !== 0" :options="treeData" filterable :show-all-levels="false" clearable v-model="value" @change="change"></el-cascader>
        </div>
        <div class="lubrication">
            <div>
                <div class="title">设备油品信息</div>
                <div class="content" style="margin-top: 10px">
                    <el-timeline type="primary">
                        <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                            <span style="color: #fff">{{ activity.content }}</span>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
            <div>
                <div class="title">理化指标</div>
                <div class="content" v-if="data">
                    <div style="height: 35px; display: flex; align-items: center" v-for="item in data1" :key="item.name">
                        <div :style="'width: 20px; height: 20px;margin-right: 20px; border-radius: 20px;background-color:' + 'rgb(111, 207, 242)'"></div>
                        <div style="flex: 1; color: #11b7a4">{{ item.label }}</div>
                        <div :style="'flex: 1;color:' + 'rgb(111, 207, 242)'">{{ data[item.name] + ' ' + item.unit }}</div>
                        <div :style="'flex: 1;color:' + 'rgb(111, 207, 242)'">正常</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">磨粒颗粒数</div>
                <div class="content" v-if="data">
                    <div style="height: 25px; display: flex; align-items: center; font-size: 14px" v-for="item in data2" :key="item.name">
                        <div :style="'width: 15px; height: 15px;margin-right: 15px; border-radius: 15px;background-color:' + 'rgb(111, 207, 242)'"></div>
                        <div style="flex: 1.5; color: #11b7a4">{{ item.label }}</div>
                        <div :style="'flex: 1;color:' + 'rgb(111, 207, 242)'">{{ data[item.name] + ' ' + item.unit }}</div>
                        <div :style="'flex: 1;color:' + 'rgb(111, 207, 242)'">正常</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">油品状态</div>
                <div class="content" style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px">
                    <div style="display: flex; flex-direction: column; align-items: center">
                        <div style="color: #11b7a4">流量</div>
                        <div style="position: relative; margin-top: 6px">
                            <div style="width: 80px; height: 80px; border-radius: 50%; border: 9px solid rgb(255, 186, 25)"></div>
                            <div
                                style="
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%) rotate(20deg);
                                    width: 0;
                                    height: 0;
                                    border-right: 46px solid transparent;
                                    border-left: 46px solid transparent;
                                    border-top: 46px solid rgba(19, 39, 76, 1);
                                    border-bottom: 46px solid transparent;
                                    border-radius: 46px;
                                "
                            ></div>
                            <div style="position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center">
                                <div style="margin-bottom: 4px">30ml</div>
                                <div>min</div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; flex-direction: column; align-items: center">
                        <div style="color: #11b7a4">温度</div>
                        <div style="position: relative; margin-top: 6px">
                            <div style="width: 80px; height: 80px; border-radius: 50%; border: 9px solid #11b7a4"></div>
                            <div
                                style="
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%) rotate(-25deg);
                                    width: 0;
                                    height: 0;
                                    border-right: 46px solid rgba(19, 39, 76, 1);
                                    border-left: 46px solid rgba(19, 39, 76, 1);
                                    border-top: 46px solid transparent;
                                    border-bottom: 46px solid rgba(19, 39, 76, 1);
                                    border-radius: 46px;
                                "
                            ></div>
                            <div style="position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center">
                                <div style="margin-bottom: 4px">35.6</div>
                                <div>℃</div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; flex-direction: column; align-items: center">
                        <div style="color: #11b7a4">泄露</div>
                        <div style="position: relative; margin-top: 6px">
                            <div style="width: 80px; height: 80px; border-radius: 50%; border: 9px solid #11b7a4; margin-top: 6px"></div>
                            <div
                                style="
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%) rotate(45deg);
                                    width: 0;
                                    height: 0;
                                    border-right: 46px solid rgba(19, 39, 76, 1);
                                    border-left: 46px solid transparent;
                                    border-top: 46px solid transparent;
                                    border-bottom: 46px solid rgba(19, 39, 76, 1);
                                    border-radius: 46px;
                                "
                            ></div>
                            <div style="position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center">
                                <div>未泄露</div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; flex-direction: column; align-items: center">
                        <div style="color: #11b7a4">油路压力</div>
                        <div style="position: relative; margin-top: 6px">
                            <div style="width: 80px; height: 80px; border-radius: 50%; border: 9px solid rgb(254, 255, 0)"></div>
                            <div
                                style="
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%) rotate(45deg);
                                    width: 0;
                                    height: 0;
                                    border-right: 46px solid rgba(19, 39, 76, 1);
                                    border-left: 46px solid transparent;
                                    border-top: 46px solid transparent;
                                    border-bottom: 46px solid rgba(19, 39, 76, 1);
                                    border-radius: 46px;
                                "
                            ></div>
                            <div style="position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center">
                                <div>2G</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="padding-bottom: 20px">
                <div class="title">铁磁磨损</div>
                <div style="flex: 1; display: flex; height: 100%">
                    <div style="flex: 1" ref="content2"></div>
                    <div style="width: 220px; margin-right: 30px; display: flex; flex-direction: column; align-items: end; justify-content: end">
                        <div style="height: 25px; line-height: 25px; color: rgb(255, 186, 25)">1427</div>
                        <div style="height: 20px; line-height: 20px; color: #5187aa; font-size: 12px">24小时颗粒数</div>
                        <div style="height: 25px; line-height: 25px; color: rgb(254, 255, 0)">8953</div>
                        <div style="height: 20px; line-height: 20px; color: #5187aa; font-size: 12px; margin-bottom: 3px">{{ today }}</div>
                    </div>
                </div>
                <div class="title">非铁磁磨损</div>
                <div style="flex: 1; display: flex; height: 100%">
                    <div style="flex: 1" ref="content3"></div>
                    <div style="width: 220px; margin-right: 30px; display: flex; flex-direction: column; align-items: end; justify-content: end">
                        <div style="height: 25px; line-height: 25px; color: rgb(255, 186, 25)">1785</div>
                        <div style="height: 20px; line-height: 20px; color: #5187aa; font-size: 12px">24小时颗粒数</div>
                        <div style="height: 25px; line-height: 25px; color: rgb(254, 255, 0)">9763</div>
                        <div style="height: 20px; line-height: 20px; color: #5187aa; font-size: 12px; margin-bottom: 3px">{{ today }}</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">V40粘度/污染度</div>
                <div class="content" ref="content1"></div>
                <!-- <div class="title">齿轮健康度</div>
            <div class="content" style="padding-left: 40px">
                <div style="display: flex; align-items: center">
                    <div style="color: #4c9bfd; width: 100px; font-size: 18px">设备编号：</div>
                    <el-select v-model="gear_name" style="width: 280px" placeholder="请选择设备编号" @change="setTimer">
                        <el-option v-for="i in options" :key="i.gear_name" :label="i.gear_name" :value="i.gear_name"></el-option>
                    </el-select>
                    <div style="color: #4c9bfd; width: 100px; font-size: 18px; margin-left: 20px">齿轮数：{{ gear_num }}</div>
                </div>
                <div style="display: flex; align-items: center; margin-top: 30px">
                    <div style="width: 100px; z-index: 9; color: #4c9bfd; font-size: 18px" class="line">健康度:{{ jkd }}</div>
                    <div style="width: 260px; height: 200px; padding: 10px; position: relative; display: flex; align-items: center; justify-content: center">
                        <div class="gear">
                            <div v-for="index in gear_num" :key="index" :style="`transform: rotate(${(360 / gear_num) * index}deg);width: ${250 / gear_num}px;position: absolute;height: 146px;overflow: hidden;`">
                                <div :style="`width: ${250 / gear_num}px; height: 200px; position: absolute; clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);background: rgb(111, 207, 242);`"></div>
                            </div>
                        </div>
                        <div class="hole"></div>
                    </div>
                </div>
            </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
import { requestApi } from '@/requset/api'
export default {
    data() {
        return {
            treeData: [],
            value: null,
            activities: [
                {
                    content: '油品信息',
                    timestamp: 'Shell S2MX 68液压油',
                },
                {
                    content: '检测点位',
                    timestamp: 'CCS液压站轧机',
                },
                {
                    content: '运行时间',
                    timestamp: '2023-08-11',
                },
                {
                    content: '换油时间',
                    timestamp: '2021-06-02',
                },
            ],
            item: null,
            data: null,
            data1: [
                {
                    label: '动力粘度',
                    name: 'dyn_vis',
                    unit: 'mPa·s',
                },
                {
                    label: '运动粘度',
                    name: 'kin_vis',
                    unit: 'cSt',
                },
                {
                    label: '密度',
                    name: 'density',
                    unit: 'kg/m³',
                },
                {
                    label: '介电常数',
                    name: 'die_con',
                    unit: '',
                },
                {
                    label: '温度',
                    name: 'tem',
                    unit: '℃',
                },
                {
                    label: '饱和度',
                    name: 'sat_lev',
                    unit: 'aw',
                },
                {
                    label: '含水量',
                    name: 'wat_con',
                    unit: 'ppm',
                },
            ],
            data2: [
                {
                    label: '铁磁性颗粒直径40~99um',
                    name: 'iron_40_99',
                    unit: '颗',
                },
                {
                    label: '铁磁性颗粒直径100_199um',
                    name: 'iron_100_199',
                    unit: '颗',
                },
                {
                    label: '铁磁性颗粒直径200_299um',
                    name: 'iron_200_299',
                    unit: '颗',
                },
                {
                    label: '铁磁性颗粒直径300_399um',
                    name: 'iron_300_399',
                    unit: '颗',
                },
                {
                    label: '铁磁性颗粒直径≥400um',
                    name: 'iron_400',
                    unit: '颗',
                },
                {
                    label: '非铁磁性颗粒直径150~199um',
                    name: 'non_iron_150_199',
                    unit: '颗',
                },
                {
                    label: '非铁磁性颗粒直径200~299um',
                    name: 'non_iron_200_299',
                    unit: '颗',
                },
                {
                    label: '非铁磁性颗粒直径300~399um',
                    name: 'non_iron_300_399',
                    unit: '颗',
                },
                {
                    label: '非铁磁性颗粒直径400~499um',
                    name: 'non_iron_400_499',
                    unit: '颗',
                },
                {
                    label: '非铁磁性颗粒直径≥500um',
                    name: 'non_iron_500',
                    unit: '颗',
                },
                {
                    label: '颗粒总数',
                    name: 'total',
                    unit: '颗',
                },
            ],
            jkd: 90,
            timer: null,
            gear_num: 20,
            gear_name: '',
            options: [],
        }
    },
    components: {},
    computed: {
        ...mapState('backstage', ['sensorTreeData']),
        randomRealTime() {
            return this.realTime.map((item) => {
                return {
                    name: item.name,
                    data: this.random(item.data),
                    state: this.random(item.state),
                }
            })
        },
        today() {
            let currentDate = new Date()
            currentDate.setDate(currentDate.getDate() - 15)
            let year = currentDate.getFullYear() // 获取当前年份
            let month = currentDate.getMonth() + 1 // 获取当前月份（注意月份是从0开始，所以需要加1）
            let day = currentDate.getDate() // 获取当前日期
            return `${year}年${month}月${day}日至今日累计检测15天`
        },
    },
    methods: {
        change(data) {
            requestApi('post', '/sensor/getlist', { id: data[data.length - 1], page: 1, size: 1 }).then((res) => {
                this.item = res.data.data[0]
                requestApi('post', '/lubrication/get', { port: this.item.port, address: this.item.address }).then((res) => {
                    this.data = res.data.data
                })
            })
        },
        random(data) {
            return data[Math.floor(Math.random() * data.length)]
        },
        stateColor(state) {
            if (state === '一级告警') {
                return 'rgb(254, 255, 0)'
            } else if (state === '二级告警') {
                return 'rgb(255, 186, 25)'
            } else if (state === '三级告警') {
                return 'rgb(254, 0, 0)'
            } else {
                return 'rgb(111, 207, 242)'
            }
        },
        drawV40() {
            this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.content1)
                const now = new Date()
                // 倒推30分钟，得到起始时间
                const start = new Date(now.getTime() - 30 * 60 * 1000)
                // 生成相邻时间点，每个时间点间隔3分钟，直到当前时间为止
                const dataX = []
                const dataY = []
                for (let time = start; time <= now; time = new Date(time.getTime() + 3 * 60 * 1000)) {
                    const hour = time.getHours().toString().padStart(2, '0')
                    const minute = time.getMinutes().toString().padStart(2, '0')
                    dataX.push(`${hour}:${minute}`)
                }
                for (let i = 0; i < dataX.length; i++) {
                    const randomNum = Math.floor(Math.random() * 11) + 60
                    dataY.push(randomNum)
                }

                const dataY1 = []
                for (let i = 0; i < dataX.length; i++) {
                    const randomNum = Math.floor(Math.random() * 3 + 4)
                    dataY1.push(randomNum)
                }
                let option = {
                    color: ['#00f2f1', '#E33E31'],
                    legend: {
                        type: 'plain',
                        // 修饰图例文字的颜色
                        textStyle: {
                            color: '#4c9bfd',
                        },
                    },
                    xAxis: {
                        axisLabel: {
                            textStyle: {
                                color: '#1FF8FD', // x轴文字颜色
                            },
                        },
                        type: 'category',
                        boundaryGap: false,
                        data: dataX,
                        // name: "日期",
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18,
                        },
                        axisTick: {
                            show: false,
                        },
                        // 修饰刻度标签的颜色
                        axisLabel: {
                            textStyle: {
                                color: '#5187AA', // x轴文字颜色
                            },
                        },
                        // 去除x坐标轴的颜色
                        axisLine: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        // name: "纵轴名称",
                        minInterval: 1,
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18,
                            color: 'red',
                        },
                        axisTick: {
                            show: false,
                        },
                        // 修饰刻度标签的颜色
                        axisLabel: {
                            textStyle: {
                                color: '#5187AA', // x轴文字颜色
                            },
                        },
                        // 修改y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: '#284469',
                            },
                        },
                    },
                    // tooltip，鼠标放到折线图上展示的数据展示样式
                    tooltip: {
                        trigger: 'axis',
                    },
                    series: [
                        {
                            name: 'V40粘度',
                            data: dataY,
                            type: 'line',
                            itemStyle: {
                                color: 'rgb(254, 255, 0)', //折线点的颜色
                                lineStyle: {
                                    color: 'rgb(254, 255, 0)', //折线的颜色
                                },
                            },
                        },
                        { name: '污染度', data: dataY1, type: 'line' },
                    ],
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '4%',
                        bottom: '4%',
                        show: true,
                        borderColor: '#012f4a',
                        containLabel: true,
                    },
                }
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        // drawWrandu() {
        //     this.$nextTick(() => {
        //         let myChart = echarts.init(this.$refs.content4)
        //         const now = new Date()
        //         // 倒推30分钟，得到起始时间
        //         const start = new Date(now.getTime() - 30 * 60 * 1000)
        //         // 生成相邻时间点，每个时间点间隔3分钟，直到当前时间为止
        //         const dataX = []
        //         const dataY = []
        //         for (let time = start; time <= now; time = new Date(time.getTime() + 3 * 60 * 1000)) {
        //             const hour = time.getHours().toString().padStart(2, '0')
        //             const minute = time.getMinutes().toString().padStart(2, '0')
        //             dataX.push(`${hour}:${minute}`)
        //         }
        //         for (let i = 0; i < dataX.length; i++) {
        //             const randomNum = Math.floor(Math.random() * 3 + 4)
        //             dataY.push(randomNum)
        //         }
        //         let option = {
        //             color: ['#00f2f1', '#E33E31'],
        //             legend: {
        //                 data: ['数据'],
        //                 right: '10%',
        //                 // 修饰图例文字的颜色
        //                 textStyle: {
        //                     color: '#4c9bfd',
        //                 },
        //             },
        //             xAxis: {
        //                 type: 'category',
        //                 boundaryGap: false,
        //                 data: dataX,
        //                 // name: "日期",
        //                 nameTextStyle: {
        //                     fontWeight: 600,
        //                     fontSize: 18,
        //                 },
        //                 axisTick: {
        //                     show: false,
        //                 },
        //                 // 修饰刻度标签的颜色
        //                 axisLabel: {
        //                     textStyle: {
        //                         color: '#5187AA', // x轴文字颜色
        //                     },
        //                 },
        //                 // 去除x坐标轴的颜色
        //                 axisLine: {
        //                     show: false,
        //                 },
        //             },
        //             yAxis: {
        //                 type: 'value',
        //                 // name: "纵轴名称",
        //                 minInterval: 1,
        //                 nameTextStyle: {
        //                     fontWeight: 600,
        //                     fontSize: 18,
        //                     color: 'red',
        //                 },
        //                 axisTick: {
        //                     show: false,
        //                 },
        //                 // 修饰刻度标签的颜色
        //                 axisLabel: {
        //                     textStyle: {
        //                         color: '#5187AA', // x轴文字颜色
        //                     },
        //                 },
        //                 // 修改y轴分割线的颜色
        //                 splitLine: {
        //                     lineStyle: {
        //                         color: '#284469',
        //                     },
        //                 },
        //             },
        //             // tooltip，鼠标放到折线图上展示的数据展示样式
        //             tooltip: {
        //                 trigger: 'axis',
        //             },
        //             series: [{ name: ' ', data: dataY, type: 'line', symbol: 'none' }],
        //             grid: {
        //                 top: '20%',
        //                 left: '3%',
        //                 right: '4%',
        //                 bottom: '4%',
        //                 show: true,
        //                 borderColor: '#012f4a',
        //                 containLabel: true,
        //             },
        //         }
        //         myChart.setOption(option)
        //         window.addEventListener('resize', function () {
        //             myChart.resize()
        //         })
        //     })
        // },
        drawTC() {
            this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.content2)
                const now = new Date()
                // 倒推30分钟，得到起始时间
                const start = new Date(now.getTime() - 15 * 60 * 1000)
                // 生成相邻时间点，每个时间点间隔3分钟，直到当前时间为止
                const dataX = []
                const dataY = []
                for (let time = start; time <= now; time = new Date(time.getTime() + 3 * 60 * 1000)) {
                    const hour = time.getHours().toString().padStart(2, '0')
                    const minute = time.getMinutes().toString().padStart(2, '0')
                    dataX.push(`${hour}:${minute}`)
                }
                for (let i = 0; i < dataX.length; i++) {
                    const randomNum = Math.floor(Math.random() * 61 + 170)
                    dataY.push(randomNum)
                }
                let option = {
                    color: ['#00f2f1', '#E33E31'],
                    legend: {
                        data: ['数据'],
                        right: '10%',
                        // 修饰图例文字的颜色
                        textStyle: {
                            color: '#4c9bfd',
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dataX,
                        // name: "日期",
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18,
                        },
                        axisTick: {
                            show: false,
                        },
                        // 修饰刻度标签的颜色
                        axisLabel: {
                            textStyle: {
                                color: '#5187AA', // x轴文字颜色
                            },
                        },
                        // 去除x坐标轴的颜色
                        axisLine: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        // name: "纵轴名称",
                        show: false,
                        minInterval: 1,
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18,
                            color: 'red',
                        },
                        axisTick: {
                            show: false,
                        },
                        // 修饰刻度标签的颜色
                        axisLabel: {
                            textStyle: {
                                color: '#1FF8FD', // x轴文字颜色
                            },
                        },
                        // 修改y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: '#284469',
                            },
                        },
                    },
                    // tooltip，鼠标放到折线图上展示的数据展示样式
                    tooltip: {
                        trigger: 'axis',
                    },
                    series: [
                        {
                            name: ' ',
                            data: dataY,
                            type: 'bar',
                            barWidth: 14,
                            itemStyle: {
                                borderRadius: 10,
                                color: '#1275ED',
                            },
                        },
                    ],
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '4%',
                        bottom: '4%',
                        show: true,
                        borderColor: '#012f4a',
                        containLabel: true,
                    },
                }
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        drawUTC() {
            this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.content3)
                const now = new Date()
                // 倒推30分钟，得到起始时间
                const start = new Date(now.getTime() - 15 * 60 * 1000)
                // 生成相邻时间点，每个时间点间隔3分钟，直到当前时间为止
                const dataX = []
                const dataY = []
                for (let time = start; time <= now; time = new Date(time.getTime() + 3 * 60 * 1000)) {
                    const hour = time.getHours().toString().padStart(2, '0')
                    const minute = time.getMinutes().toString().padStart(2, '0')
                    dataX.push(`${hour}:${minute}`)
                }
                for (let i = 0; i < dataX.length; i++) {
                    const randomNum = Math.floor(Math.random() * 61 + 170)
                    dataY.push(randomNum)
                }
                let option = {
                    color: ['#00f2f1', '#E33E31'],
                    legend: {
                        data: ['数据'],
                        right: '10%',
                        // 修饰图例文字的颜色
                        textStyle: {
                            color: '#4c9bfd',
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dataX,
                        // name: "日期",
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18,
                        },
                        axisTick: {
                            show: false,
                        },
                        // 修饰刻度标签的颜色
                        axisLabel: {
                            textStyle: {
                                color: '#5187AA', // x轴文字颜色
                            },
                        },
                        // 去除x坐标轴的颜色
                        axisLine: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        // name: "纵轴名称",
                        show: false,
                        minInterval: 1,
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18,
                            color: 'red',
                        },
                        axisTick: {
                            show: false,
                        },
                        // 修饰刻度标签的颜色
                        axisLabel: {
                            textStyle: {
                                color: '#1FF8FD', // x轴文字颜色
                            },
                        },
                        // 修改y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: '#284469',
                            },
                        },
                    },
                    // tooltip，鼠标放到折线图上展示的数据展示样式
                    tooltip: {
                        trigger: 'axis',
                    },
                    series: [
                        {
                            name: ' ',
                            data: dataY,
                            type: 'bar',
                            barWidth: 14,
                            itemStyle: {
                                borderRadius: 10,
                                color: '#1275ED',
                            },
                        },
                    ],
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '4%',
                        bottom: '4%',
                        show: true,
                        borderColor: '#012f4a',
                        containLabel: true,
                    },
                }
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        setTimer(gear_name) {
            this.options.map((item) => {
                this.gear_name = gear_name
                if (item.gear_name === gear_name) {
                    this.gear_num = item.gear_num

                }
            })
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
            this.jkd = 80 + Math.floor(Math.random() * 20)
            this.timer = setInterval(() => {
                this.jkd = 80 + Math.floor(Math.random() * 20)
            }, 2500)
        },
    },
    created() {
        // requestApi('get', '/sensor/gear').then((res) => {
        //     this.options = res.data.data
        //     this.gear_name = this.options[0].gear_name
        //     this.setTimer(this.gear_name)
        // })

        requestApi('post', 'diagnosis/tree', {}, true).then((res) => {
            if (res.data.code == 0) {
                let digui = (data) => {
                    if (data.type !== 's') data.children.forEach((item) => digui(item))
                    else delete data.children
                }
                res.data.data.forEach((item) => digui(item))
                this.treeData = res.data.data
            }
        })


        this.drawV40()
        this.drawTC()
        this.drawUTC()
    },
}
</script>

<style lang="less" scoped>
.lubrication {
    margin: 0 10px;
    height: calc(100% - 40px);
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;

    > div {
        background-color: rgba(19, 39, 76, 0.7);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
    }

    .title {
        margin: 20px 0 0 0;
        padding-left: 20px;
        color: #11b7a4;
        font-size: 20px;
        font-weight: 500;
        border-left: 5px solid #11b7a4;
    }

    .content {
        flex: 1;
        padding: 20px;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg); /* 从0度开始旋转 */
    }
    to {
        transform: rotate(360deg); /* 旋转到360度，一周完整的旋转 */
    }
}

.line::after {
    content: '';
    display: block;
    border-top: 2px dashed #4c9bfd; /* 设置顶部边框为1像素实线 */
    width: 140px; /* 设置宽度为100% */
    position: relative;
    top: -9px;
    right: -100px;
}

.rotate-infinite {
    animation: rotate 5s infinite linear; /* 无限循环地在5秒内做线性旋转动画 */
}

::v-deep {
    .el-timeline-item__timestamp {
        color: #11b7a4;
    }
}

.gear {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgb(111, 207, 242);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotate 10s infinite linear;
}

.hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(19, 39, 76, 1);
    border-radius: 50%;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
